<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #search>
        <el-form
          ref="formSearch"
          size="mini"
          :inline="true"
          :model="formSearch"
          class="demo-form-inline"
        >
          <el-form-item label="选择城市">
            <el-select v-model="formSearch.city_id" style="width: 120px" placeholder="选择城市">
              <el-option label="全部" value />
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.city_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="店铺id">
            <el-input v-model="formSearch.shop_id" style="width: 100px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="onResetForm">清空</el-button>
            <el-button type="primary" @click.prevent="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #right>
        <el-button type="primary" size="mini" @click="addShop">新增门店</el-button>
      </template>
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table :data="shopList" border>
        <el-table-column label="序号" type="index" fixed="left" width="60" sortable />
        <el-table-column label="门店id" prop="id" fixed="left" width="80" />
        <el-table-column label="店名" prop="shop_name" width="80" />
        <el-table-column label="所在城市" :formatter="getCityName" width="110" sortable />
        <el-table-column label="具体地址" prop="address" />
        <el-table-column label="店长姓名" prop="shop_owner" width="80" />
        <el-table-column label="是否上线" width="100">
          <template #default="{ row }">
            <el-switch
              :value="row.status === 1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否上线" width="100">
          <template #default="{ row }">
            <router-link class="text-link" :to="'/shop/goods?shop_id=' + row.id">查看商品</router-link>
          </template>
        </el-table-column>
        <el-table-column label="开店时间" prop="create_time" width="110" sortable>
          <template #default="{ row }">{{ row.create_time | formatTime }}</template>
        </el-table-column>
        <el-table-column label="营业时间" prop="create_time" width="110">
          <template #default="{ row }">{{ row.open_time }} - {{ row.close_time }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editCity(row)">编辑</el-button>
            <router-link class="text-link" :to="'/order_goods/show?shop_id=' + row.id">当前订单</router-link>
            <!-- <el-button type="text" size="small" @click="clickDel(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <!-- <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>-->
    </el-card>

    <add-edit ref="AddEditDialog" :city-list="cityList" @refresh="getShopList" />
  </div>
</template>

<script>
const formSearch = {
  city_id: '',
  shop_id: '',
  pageNum: 1,
  pageSize: 10
}
import { getCityList } from '@/api/city'
import { getShopList, updateOneShopById } from '@/api/shop'
import AddEdit from './components/AddEdit.vue'
import { formatTime } from '@/filters/index'
export default {
  name: 'ShopList',
  components: {
    AddEdit
  },
  filters: {
    formatTime
  },
  props: {},
  data() {
    return {
      formSearch: {},
      cityList: [],
      isLoading: 0,
      page: 1,
      size: 10,
      total: 0,
      shopList: []
    }
  },
  computed: {},
  async  created() {
    this.initFormSearch()
    await this.getCityList()
    this.getShopList()
  },
  mounted() {},
  methods: {
    initFormSearch() {
      this.formSearch = Object.assign({}, formSearch, this.$route.query)
      this.formSearch.pageNum = Number.parseInt(this.formSearch.pageNum)
      this.formSearch.pageSize = Number.parseInt(this.formSearch.pageSize)
    },
    changeQuery() {
      // 获取当前的query参数
      const currentQuery = this.$route.query

      // 将新的筛选条件合并到query参数中
      const newQuery = Object.assign({}, currentQuery, this.formSearch)

      // 使用Vue Router的replace方法更新URL
      this.$router.replace({ query: newQuery })
    },
    onResetForm() {
      this.formSearch = { ...formSearch }
      this.changeQuery()
      this.$refs.formSearch.resetFields()
      this.getShopList()
    },
    onSearch() {
      this.formSearch.pageNum = 1
      this.formSearch.pageSize = 10
      this.changeQuery()
      this.getShopList()
    },
    async getCityList() {
      try {
        this.isLoading++
        const res = await getCityList()
        this.cityList = res
      } finally {
        this.isLoading--
      }
    },
    async getShopList() {
      try {
        this.isLoading++
        const { city_id, shop_id, pageNum, pageSize } = this.formSearch
        const res = await getShopList({
          city_id: city_id ? Number.parseInt(city_id) : null,
          shop_id: shop_id ? Number.parseInt(shop_id) : null,
          pageNum: Number.parseInt(pageNum),
          pageSize: Number.parseInt(pageSize)
        })
        this.shopList = res
      } finally {
        this.isLoading--
      }
    },
    getCityName(row) {
      const { city_name } = this.cityList.find(item => item.id === row.city_id)
      return city_name
    },
    // async onSearch() {
    //   const res = await request('admin_getShopList', { city_id: this.formSearch.city_id })
    //   this.shopList = res.list
    //   this.total = res.total
    // },
    changeStatus(row) {
      this.$confirm('确定要进行次操作么？', '温馨提示').then(async() => {
        this.isLoading++
        await updateOneShopById({
          id: row.id,
          status: row.status === 1 ? -1 : 1
        })

        await this.getShopList()
        this.isLoading--
      }).catch(() => {
        console.log('取消')
      })
    },
    editCity(row) {
      this.$refs.AddEditDialog.open(row)
    },
    addShop() {
      this.$refs.AddEditDialog.open()
    }
    // clickDel(row) {
    //   this.$confirm('确定要进行次操作么？', '温馨提示').then(async() => {
    //     this.isLoading++
    //     await request('admin_updateShop', {
    //       shop_id: row.shop_id,
    //       status: -1
    //     })
    //     this.$message.success('删除成功！')

    //     await this.getShopList()
    //     this.isLoading--
    //   }).catch(() => {
    //     console.log('取消')
    //   })
    // }
    // indexMethod(index) {
    //   return index + 1 + (this.page - 1) * this.size
    // },
    // handleSizeChange() {},
    // handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
</style>
